<template>
  <div class="page_list">
    <div class="page_item" v-for="page in pageList">
      <div class="page_item_content">
        <n-icon size="16">
          <CopyOutline></CopyOutline>
        </n-icon>
        <span>
          {{ page.name }}
        </span>
      </div>
      <common-underline></common-underline>
    </div>
    <common-empty :emptyImgWidth="'86px'" tipSize="14px" v-show="!pageList.length"></common-empty>
  </div>
</template>

<script lang="ts" setup>
  import { CopyOutline } from '@vicons/ionicons5';
  interface PageItem {
    name: string;
    id: string;
  }
  const pageList = reactive<PageItem[]>([
    {
      id: '1',
      name: '页面1',
    },
    {
      id: '1',
      name: '页面1',
    },
    {
      id: '1',
      name: '页面1',
    },
    {
      id: '1',
      name: '页面1',
    },
    {
      id: '1',
      name: '页面1',
    },
  ]);
</script>

<style scoped lang="scss">
  .page_list {
    max-height: 196px;
    overflow-y: auto;
    .page_item_content {
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 0 36px;
      height: 48px;
      color: $text-primary;
      font-size: 16px;
      &:hover {
        color: $primary-color;
      }
      span {
        margin-left: 4px;
      }
    }
  }
</style>
